<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;border:0;margin: 0;outline: 0;box-sizing: border-box;}
			span{display: inline-block;}
			.screen{height: 500px;border: 4px solid #000;background-color: #222;color: #fff;padding: 10px;overflow: auto;}
			.input-box{height: 40px;line-height: 40px;border-bottom: 1px solid #ddd;}
			.input-box input{height: 100%;width: 80%;float: left;padding: 0 10px;}
			.input-box .submit{height: 100%;width: 10%;float: right;background-color: #8ac;color: #fff;text-align: center;cursor: pointer;}
			.input-box .user{height: 100%;width: 10%;float: left;background-color: #8ac;color: #fff;text-align: center;cursor: pointer;}
			.screen::-webkit-scrollbar{width: 0px;background-color: gray;}
			.screen::-webkit-scrollbar-thumb{width:0px;border-radius: 5px;background-color: blue;}
		</style>
	</head>
	<body>
		<div class="screen" id="screen"></div>
		<div class="input-box">
			<span class="user" id="user"">用户1</span>
			<input class="content" type="text" name="" placeholder="在此输入聊天信息" id="content">
			<span class="submit" id="submit">发送信息</span>
		</div>
		<script type="text/javascript">
			var screen = document.getElementById('screen');
			var content = document.getElementById('content');
			var submit = document.getElementById('submit');
			var user = document.getElementById('user');


			submit.onclick = function(){
				var date = new Date();
				var time = date.getTime();

				if(user.innerText == '用户1'){
					var rowMsg = '<div>' + content.value + '</div>';
				}else{
					var rowMsg = '<div style="float: right;">' + content.value + '</div> <br />';
				}
				
				screen.innerHTML += rowMsg;
				localStorage[time] = rowMsg;
				content.value = '';

				screen.scrollTop = screen.scrollHeight;

			}
			setInterval(function(){
				var str = '';
				for(var i in localStorage){
					str += '<div>' + localStorage[i] + '</div>';
					screen.innerHTML = str;
					screen.scrollTop = screen.scrollHeight;	
				}
			},1000);
			
			user.onclick = function(){
				console.dir(this);
				if(user.innerText == '用户1'){
					user.innerText = '用户2';
				}else{
					user.innerText = '用户1';
				}
			}

			document.onkeyup = function (event) {
	            var e = event || window.event;
	            var keyCode = e.keyCode || e.which;
	            switch (keyCode) {
	                case 13:
	                    submit.onclick();
	                    break;
	               	case 9:
	               		user.onclick();
	               		break;
	                default:
	                    break;
	            }
	        }
			


		</script>
	</body>
</html>